<template>
    <view class="absolute bg-blackx w-full min-h-full box-border p-4">
        <view class=" mt-4 flex flex-col box-border w-full py-4 rounded-xl gap-2">
            <view class="text-white text-2xl flex flex-row items-center gap-2">
                <view class="overflow-ellipsis overflow-hidden whitespace-nowrap">
                    {{user.nickname}}
                </view>
                <uv-icon @click="onEdit" name="edit-pen" :color="whitexLight" size="50rpx"></uv-icon>
            </view>
            <view class="text-whitex flex items-center flex-nowrap text-sm gap-2">
                <text class="text-whitexlight">{{page_config.register_days_text}}</text>
            </view>
            <view class="text-whitex text-xs">
                <text class="text-whitexlight">UID:{{user.id}}</text>
            </view>
        </view>
        <view class="flex flex-row justify-between bg-blackxlight box-border p-4 rounded-xl">
            <view class="flex flex-col items-center w-1/2 gap-2" @click="showUsage(page_config.coin_usage)">
                <text class="text-whitex text-lg">{{user.coin?.balance??0}}</text>
                <text class="text-whitexlight">{{page_config.coin_name}}</text>
            </view>
            <view class="w-0 border border-solid border-blackx"></view>
            <view class="flex flex-col items-center w-1/2 gap-2" @click="showUsage(page_config.score_usage)">
                <text class="text-whitex text-lg">{{user.coin?.score??0}}</text>
                <text class="text-whitexlight">{{page_config.score_name}}</text>
            </view>
        </view>
        <view class="menugroup" v-for="i,ik in page_config.button_list" :key="ik">
            <view class="menuitem" v-for="j,jk in i.list" v-show="j.enabled" @click="toView(j)" :key="jk">
                <text :class="j.highlight?'text-orangex':'text-whitex'">{{j.title}}</text>
                <uv-icon name="arrow-right" :color="whitex"></uv-icon>
				<button v-if="j.open_type" class="absolute box-border opacity-0 w-4/5" :open-type="j.open_type">{{j.title}}</button>
            </view>
        </view>
        <editNicknamePopup ref="editNicknamePop" @nicknameUpdated="nicknameUpdated"></editNicknamePopup>
    </view>
</template>

<script>
    import {
        colors
    } from '../../consts/colors';
    import {
        doShare,
        myAuthData
    } from '../../http/api';
    import { getToken } from '../../http/http';

    export default {
        data() {
            return {
                whitex: colors.whitex,
                whitexLight: colors.whitexLight,
                user: {
                    id: '',
                    nickname: '山河无恙,国泰民安',
                    register_days: '',
                    coin: {
                        balance: 0,
                        score: 0,
                    },
                },
                page_config: {
                    register_days_text: '',
                    coin_name: '',
                    score_name: '',
                    ad_id: '',
                    button_list: [],
                    share_info: {
                        title: '',
                        path: "/pages/index/index",
                        imageUrl: '',
                    },
                    coin_usage: '',
                    score_usage: '',
                },
            }
        },
        methods: {
            showUsage(title) {
                uni.showToast({
                    title,
                    icon: 'none'
                })
            },
            toView(i) {
				if(i.no_view){
					return
				}
                const { url = '' } = i
                console.log(url);
                if (url.startsWith('http')) {
                    const link = encodeURIComponent(url)
                    const token = getToken()
                    uni.navigateTo({ url: `/pages/webview/webview?url=${link}&token=${token}` })
                } else {
                    uni.navigateTo({ url })
                }
            },
            onViewAd() {
                const ad = uni.createRewardedVideoAd({
                    adUnitId: this.page_config.ad_id
                })
                ad.onError(() => {
                    uni.showToast({
                        icon: "none",
                        title: "广告加载失败,请稍后",
                    })
                })
                ad.onClose((data) => {
                    console.log(data);
                    if (data.isEnded) {
                        console.log("观看了视频");
                        ad.destroy();
                    } else {
                        uni.showToast({
                            icon: "none",
                            title: "未观看完视频",
                        });
                    }
                })
            },
            onEdit() {
                this.$refs.editNicknamePop.open()
            },
            nicknameUpdated(e) {
                console.log(e);
                this.getData()
            },
            async getData() {
                const res = await myAuthData()
                console.log(res);
                const data = res.data
                this.user = data.user
                this.page_config = data.page_config
            },
        },
        async onShareAppMessage() {
            await doShare({
                user_id: this.user.id
            })
            await this.getData()
            return this.page_config.share_info
        },
        onLoad() {
            this.getData()
        }
    }
</script>

<style>
    .menuitem {
        @apply flex justify-between items-center w-full h-14;
    }

    .menugroup {
        @apply flex flex-col justify-between bg-blackxlight box-border px-4 rounded-xl mt-4;
    }
</style>